// BackToTop.tsx
import React, { useEffect, useState } from "react";
import styles from "./index.module.css"; // 使用 CSS Module

interface BackToTopProps {
  /** 滚动多少距离后显示按钮，默认 200px */
  visibleHeight?: number;
  /** 滚动动画时长（毫秒），默认 500ms */
  duration?: number;
}

const BackToTop: React.FC<BackToTopProps> = ({ visibleHeight = 200 }) => {
  const [visible, setVisible] = useState(false);

  // 监听页面滚动，控制按钮显示
  useEffect(() => {
    const onScroll = () => {
      setVisible(window.scrollY > visibleHeight);
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [visibleHeight]);

  // 平滑滚动函数
//   const scrollToTop = () => {
//     const start = window.scrollY; // 起始位置
//     const startTime = performance.now(); // 动画开始时间

//     const step = (currentTime: number) => {
//       const elapsed = currentTime - startTime; // 已经过去的时间
//       const progress = Math.min(elapsed / duration, 1); // 进度 [0,1]

//       // 使用 easeInOut 缓动函数
//     //   const easeInOut = progress < 0.5
//     //     ? 2 * progress * progress
//     //     : -1 + (4 - 2 * progress) * progress;

//       window.scrollTo(0, start * (1 - progress));

//       if (progress < 1) {
//         requestAnimationFrame(step);
//       }
//     };

//     requestAnimationFrame(step);
//   };

  const scrollToTop = () => {
    // 最新浏览器 API，平滑滚动到顶部
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  if (!visible) return null;

  return (
    <button className={styles.backToTop} onClick={scrollToTop}>
      ↑ 返回顶部
    </button>
  );
};

export default BackToTop;
